<template>
  <div class="right-config">
    <mu-card class="slider-card">
      <mu-avatar class="avatar" size="100">
        <img v-lazy="avatar" alt="" />
      </mu-avatar>
      <div class="title">你的名字</div>
      <div class="desc">专治颖难杂症</div>
      <div class="tags">
        <mu-chip class="chip">Vue</mu-chip>
        <mu-chip class="chip">React</mu-chip>
        <mu-chip class="chip">Node.js</mu-chip>
      </div>
      <div class="friend-link-box">
        <p class="friend-link-title">友情链接</p>
        <div class="friend-links">
          <a href="https://github.com/" target="_blank">
            <mu-avatar size="40">
              <img
                src="https://img0.baidu.com/it/u=1529409795,609160629&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </mu-avatar>
          </a>
          <a href="https://gitee.com/" target="_blank">
            <mu-avatar size="40">
              <img
                src="https://img1.baidu.com/it/u=3844440456,2658507533&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </mu-avatar>
          </a>
          <a href="https://www.bilibili.com/" target="_blank">
            <mu-avatar size="40">
              <img
                src="https://img0.baidu.com/it/u=1858957728,3698163772&fm=26&fmt=auto&gp=0.jpg"
                alt=""
              />
            </mu-avatar>
          </a>
        </div>
      </div>
    </mu-card>

    <mu-card class="slider-card card-ad">
      <div class="ad">广告</div>
      <mu-carousel style="height: 120px" hide-controls>
        <mu-carousel-item>
          <img
            style="width: 100%; cursor: pointer"
            src="https://img.alicdn.com/imgextra/i2/O1CN011FMQT21RF8u1nHsem_!!6000000002081-0-tps-2880-1070.jpg"
          />
        </mu-carousel-item>
      </mu-carousel>
    </mu-card>

    <mu-card class="slider-card">
      <div class="friend-link-box">
        <p class="friend-link-title">电影推荐</p>
        <div class="friend-links">
          <div class="tags">
            <mu-chip class="chip">唐人街探案3</mu-chip>
          </div>
        </div>
      </div>
      <div class="friend-link-box">
        <p class="friend-link-title">电视剧推荐</p>
        <div class="friend-links">
          <div class="tags">
            <mu-chip class="chip">唐人街探案3</mu-chip>
          </div>
        </div>
      </div>
      <div class="friend-link-box">
        <p class="friend-link-title">音乐推荐</p>
        <div class="friend-links">
          <div class="tags">
            <mu-chip class="chip">唐人街探案3</mu-chip>
          </div>
        </div>
      </div>
    </mu-card>

    <mu-card class="slider-card card-ad">
      先不放东西
      <img src="" alt="" />
    </mu-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  }
}
</script>
<style lang="less" scoped>
.right-config {
  width: 4rem;
}
.slider-card {
  position: relative;
  margin-top: 16px;
  text-align: center;
  padding: 16px;
  border-radius: 5px;
  box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.2),
    0 1px 8px 0 rgba(0, 0, 0, 0.2);
  .avatar {
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2),
      0 3px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.2);
  }
  .title {
    font-size: 20px;
    color: #00e676;
  }
  .desc {
    font-size: 14px;
    margin: 10px 0;
  }
  .tags {
    .chip {
      margin: 0 10px 10px 0;
    }
  }
  .friend-link-box {
    .friend-link-title {
      position: relative;
      &::before {
        content: '';
        width: 30%;
        height: 1px;
        background: #ccc;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        content: '';
        width: 30%;
        height: 1px;
        background: #ccc;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .friend-links {
      display: flex;
      justify-content: space-around;
    }
  }
}
.card-ad {
  padding: 8px;
}
.ad {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 12px;
  z-index: 1;
}
</style>
